<template>
  <div class="relation-task">
    <el-table 
      :data="list"
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
    >
      <el-table-column :label="$t('common.base.goodsNo')" width="150">
        <template slot-scope="scope">
          <div class="view-detail-btn" @click="handleOpenGoodsMenuTab(scope.row)">{{scope.row.originCode}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('goods.component.tradeName')" width="180">
        <template slot-scope="scope">
            <div class="product_name table-blacklist">
                <el-image
                style="width: 32px; height: 32px; margin-right: 12px"
                :src="scope.row.image || goodsDefault"
                ></el-image>
                <p>{{ scope.row.name }}</p>
            </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('order.detailV2.productType')">
        <template slot-scope="scope">
            <p>{{ scope.row.originType === 1 ? $t('common.base.sparePart') : scope.row.originType === 2 ? $t('common.label.serviceItem') : $t('common.form.type.material') }}</p>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.part.category')">
        <template slot-scope="scope">
            <p>{{ scope.row.originCategory || '-' }}</p>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.part.specifications')">
        <template slot-scope="scope">
            <p>{{ scope.row.standard || '-' }}</p>
        </template>
      </el-table-column>
      <el-table-column :label="$t('order.detailV2.serviceMethod')">
        <template slot-scope="scope">
            <p>{{ scope.row.serviceType === 1 ? $t('goods.component.expressDelivery') : scope.row.serviceType === 2 ? $t('task.setting.taskTypeSetting.manage.industryNames.name7') : $t('goods.component.serviceMethod') }}</p>
        </template>
      </el-table-column>
      <el-table-column :label="$t('goods.component.price')" prop="salePrice"></el-table-column>
      <el-table-column :label="$t('common.base.quantity')" prop="partCount"></el-table-column>
      <el-table-column :label="$t('order.detailV2.subtotal')" prop="subtotal"></el-table-column>
    </el-table>

  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const goodsDefault = getOssUrl('/goodsDefault.png');
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: 'order-products',
  props:{
    list: {
      type: Array,
      default: ()=> []
    },
  },
  data() {
    return{
        goodsDefault
    }
  },
  methods: {
    handleOpenGoodsMenuTab(row) {
      if (!row.partId) return;

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        fromId,
        type:PageRoutesTypeEnum.PageLinkcGoodsDetail,
        params:`id=${row.partId}`,
        key:row.partId,
        titleKey:` - ${row.name}`
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.relation-task {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  ::v-deep .el-table {
    flex: 1;
    overflow: auto;
    p {
      margin: 0;
    }
  }
  .product_name{
    display: flex;
    align-items: center;
    p{
        margin: 0;
        width: 120px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
    }
  }
}
</style>